﻿<template>
    <div class="person">
        <p>姓名:{{ person.name }}</p>
        <p>年龄:{{ person.age }}</p>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
   </div>
</template>



<script lang = "ts" setup name="Person">
    // ref 基本类型 和对象类型
    // reactive 对象，Proxy 原生代理，reactive 是深层次的
    import { ref,reactive ,toRefs} from 'vue';
    let person = reactive({   
            name:"zhangsan",
            age:19
        }
    )
    
    // let {name,age} = person
    let {name,age} = toRefs(person)

    function changeName(){
        // name += '~'
        name.value += '~'
        person.name +='~'
    }
    function changeAge(){
        // age += 1
        age.value += 1
        person.age += 1
    }
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
    li{
        font-size: 20px;
    }
</style>